<template>
  <el-dialog
    :title="$t('支付方式')"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    :before-close="payDone"
    append-to-body
    class="my-dialog__wrapper pay-container"
    width="20%"
  >
    <el-radio-group v-model="radio" v-if="!isHandlePay">
      <el-radio :label="'wx_native'"
        ><div class="pay-item">
          <img src="../assets/img/wxpay.jpg" alt="" />
          <p>{{ $t("微信支付") }}</p>
        </div></el-radio
      >
      <el-radio :label="'alipay_pc'">
        <div class="pay-item">
          <img src="../assets/img/zfbpay.jpg" alt="" />
          <p>{{ $t("支付宝支付") }}</p>
        </div></el-radio
      >
      <el-radio :label="'paypal'">
        <div class="pay-item">
          <img src="../assets/img/paypalpay.jpg" alt="" />
          <p>{{ $t("PayPal支付") }}</p>
        </div></el-radio
      >
    </el-radio-group>
    <div v-else>
      <div class="wx-qr-code" ref="qrcode"></div>
      <el-button type="primary" @click="payDone">{{
        $t("支付成功")
      }}</el-button>
      <el-button type="primary" @click="payQuest">{{
        $t("支付遇到问题")
      }}</el-button>
    </div>
    <span slot="footer" class="dialog-footer" v-if="!isHandlePay">
      <el-button type="primary" v-loading="isLoading" @click="handlePay">{{
        $t("确 定")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/reward.js";
import { openIframeWindow } from "@/utils";
import QRCode from "qrcodejs2";
export default {
  props: {
    payId: null,
  },
  data() {
    return {
      centerDialogVisible: false,
      radio: "wx_native",
      isHandlePay: false,
      isLoading: false,
      zfbpayUrl: "",
      wxpayUrl: "",
    };
  },
  methods: {
    generateQRCode() {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrcode, {
          text: this.wxpayUrl, // 要生成二维码的链接
          width: 200,
          height: 200,
          colorDark: "#000000", // 二维码颜色
          colorLight: "#ffffff", // 背景色
          correctLevel: QRCode.CorrectLevel.H, // 容错级别（L/M/Q/H）
        });
      });
    },
    openDialog() {
      this.radio = "wx_native";
      this.zfbpayUrl = "";
      this.centerDialogVisible = true;
      this.isHandlePay = false;
    },
    payDone() {
      this.$emit("payDone");
      this.centerDialogVisible = false;
    },
    openIframeWindow(
      url,
      windowName = "iframeWindow",
      width = 800,
      height = 600
    ) {
      openIframeWindow(url, windowName, width, height);
    },
    payQuest() {
      if (this.zfbpayUrl) {
        this.openIframeWindow(this.zfbpayUrl);
      }
    },
    async handlePay() {
      this.isLoading = true;
      let res = await this.$http.post(api.getPayUrl, {
        id: this.payId,
        channelCode: this.radio,
        returnUrl:
          "https://www.rebirthealth.com",
      });
      this.isLoading = false;
      if (res && res.code == 0) {
        this.isHandlePay = true;
        if (this.radio == "alipay_pc") {
          this.zfbpayUrl = res.data.displayContent;
          this.openIframeWindow(res.data.displayContent, this.$t("支付"));
        } else if (this.radio == "wx_native") {
          this.wxpayUrl = res.data.displayContent;
          this.generateQRCode();
        } else if (this.radio == "paypal") {
          // paypal和支付宝一样是打开新窗口，暂时复用这个变量
          this.zfbpayUrl = res.data.displayContent;
          this.openIframeWindow(res.data.displayContent, this.$t("支付"));
        }
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.pay-container {
  .pay-item {
    display: flex;
    height: 2rem;
    align-items: center;
    img {
      width: 1.5rem;
      margin-right: 0.5rem;
    }
    p {
      font-size: 1rem;
    }
  }
  .el-radio-group {
    display: flex;
    flex-direction: column;
  }
  .el-radio {
    display: flex;
    align-items: center;
  }
  .wx-qr-code {
    padding: 1rem;
  }
}
</style>
